<template>
  <div>
    <group>
      <datetime v-model="date" format="YYYY-MM" title="日期" :end-date="today"></datetime>
    </group>
    <card :header="{title: '电费: ' + totalFee}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{light}}</span>
          <br/>
          照明插座用电
        </div>
        <div class="vux-1px-r">
          <span>{{air}}</span>
          <br/>
          空调用电
        </div>
        <div class="vux-1px-r">
          <span>{{power}}</span>
          <br/>
          电力用电
        </div>
        <div>
          <span>{{special}}</span>
          <br/>
          特殊用电
        </div>
      </div>
    </card>
    <card :header="{title: '水费: '}">
    </card>
    <card :header="{title: '水费: '}">
    </card>
    <card :header="{title: '其它: '}">
    </card>
  </div>
</template>

<script>
export default {
  name: 'EnergyClassify',
  data () {
    return {
      date: '',
      today: '',
      total: '',
      totalFee: '',
      light: '',
      air: '',
      power: '',
      special: ''
    }
  },
  methods: {
    search (date) {
      var month = date.slice(0, 7)
      var str = 't=1&d={buildid:320101A068,type:1,date:' + month + '}'
      this.ajax('/ystApp/ClassItem', str).then(res => {
        if (!res.returnbean.isOK) {
          return
        }
        this.total = res.classitemlist[0].energy
        this.totalFee = res.classitemlist[0].fee
      })
      str = 't=1&d={buildid:320101A068,type:2,date:' + month + ',code:01000,rate:0.50}'
      this.ajax('/ystApp/ClassItem', str).then(res => {
        if (!res.returnbean.isOK) {
          return
        }
        var list = res.classitemlist
        this.light = list[0].fee
        this.air = list[1].fee
        this.power = list[2].fee
        this.special = list[3].fee
      })
    },
    init () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      month < 10 && (month = '0' + month)
      day < 10 && (day = '0' + day)
      this.today = this.date = `${year}-${month}-${day}`
    }
  },
  created () {
    this.init()
  },
  watch: {
    date (val) {
      this.search(val)
    }
  }
}
</script>

<style scoped>

</style>
